<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/Public/css/font.css">
    <link rel="stylesheet" href="/Public/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/Public/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/Public/js/xadmin.js"></script>
    <script type="text/javascript" src="/Public/js/ueditor.config.js"></script>
    <script type="text/javascript" src="/Public/js/ueditor.all.min.js"></script>
    <script type="text/javascript" src="/Public/js/zh-cn.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
              <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
              <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
    <style>
        .bg {
            background: #e0e0e0;
        }

        .layui-card {
            margin-bottom: 0;
        }

        .layui-card-header {
            border-bottom: none;
        }

        .select-food-panel,
        .food-panel {
            width: 49%;
            min-height: 667px;
            float: right;
            border: 1px solid #ddd;
        }

        .food-panel {
            float: left;
        }

        .typeLabel {
            padding: 10px 15px;
            margin: 10px;
            background: #fff;
            border-radius: 5px;
            border: 1px solid #ddd;
            float: left;
        }

        .foodType {
            overflow: hidden;
        }

        .foodCrad {
            padding: 20px 20px;
            box-shadow: 0 0 15px #ddd;
            background: #fff;
            float: left;
            min-width: 100px;
            text-align: center;
            position: relative;
            margin: 10px;
            border: 1px solid #fff;
        }

        .money {
            position: absolute;
            right: 15px;
            bottom: 0;
        }

        .title {
            float: left;
        }

        .order {
            float: right;
            color: red;
        }

        .selectfoodBody {
            height: 480px;
            overflow: hidden;
            overflow-y: auto;
        }

        .selectFoodCrad {
            width: 95%;
            margin: 10px auto;
            box-shadow: 0 0 15px #ddd;
            padding: 20px 10px;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-between;
            background: #fff;
        }

        .block-select-food {
            width: 100%;
        }

        .operation .btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #ddd;
            text-align: center;

        }

        .operation div {
            float: left;
            line-height: 30px;
            margin: 0 5px;
        }

        .operation .num {
            min-width: 23px;
            text-align: center;
        }

        .select-food-bottom {
            box-shadow: 0 0 5px #ddd;
            background: #fff;
            margin-top: 10px;
        }

        .total {
            float: left;
        }

        .total-money {
            float: right;
            font-size: 20px;
            color: red;
        }

        .border-bottom {
            border-bottom: 1px solid #ddd;
        }

        .active {
            border: 1px solid #009688;
            color: #009688;
        }

        #pay-header {
            overflow: hidden;
            align-items: center;
            align-content: center;
            justify-content: space-around;
            margin: 20px auto;
            width: 606px;
        }

        #pay-header .item {
            border: 1px solid #ddd;
            width: 200px;
            height: 100px;
            font-size: 40px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            float: left;
            cursor: pointer;
            border-right: 1px solid #fff;
        }

        #pay-header .item:last-child {
            border-right: 1px solid #ddd;
        }

        #pay-header .item img {
            width: 165px;
            height: auto;
        }

        #pay-body {
            padding: 20px;
        }

        #pay-panel .active {
            border: 1px solid #009688 !important;
            color: #000;
        }

        .total-num {
            float: left;
            line-height: 30px;
        }

        .closebtnt {
            margin-top: 20px;
        }

        #pay-status {
            width: 660px;
            background: #fff;
            left: 50%;
            transform: translate(-50%, 0);
            text-align: center;
            padding: 40px 0 100px;
        }

        #eat-type {
            margin-left: 15px;
        }
        #eat-type .layui-icon{
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">人工下单</div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="food-panel">
                    <div class="layui-card">
                        <div class="layui-card-header bg">人工下单</div>
                    </div>
                    <div class="layui-card-body ">
                        <div class="layui-form layui-col-space5">
                            <div class="layui-input-inline layui-show-xs-block block-food border">
                                <div class="foodType" id="type-panel">
                                    <div class="typeLabel active" data-id="0">全部</div>
                                </div>
                                <div class="cradBody" id="foodlist">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="select-food-panel">
                    <div class="layui-card">
                        <div class="layui-card-header bg"><span class="title">当前已选</span><span class="order"></span>
                        </div>
                    </div>
                    <div class="layui-card-body ">
                        <div class="layui-form layui-col-space5">
                            <div class="layui-input-inline layui-show-xs-block block-select-food border">
                                <div class="selectfoodBody">

                                </div>
                                <div class="layui-show-xs-block select-food-bottom">
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <div class="layui-input-block" id="eat-type">
                                                <input type="radio" name="eat" value="堂食" checked="checked" title="堂食">
                                                <input type="radio" name="eat" value="打包" title="打包">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-card">
                                        <div class="layui-card-header border-bottom">
                                            <div class="total">共计 <span class="food-num">0</span>个商品 </div>
                                            <div class="total-money"><span class="money-num">0</span>元</div>
                                        </div>
                                        <div class="layui-input-inline layui-show-xs-block"
                                            style="margin: 20px 0; text-align: right;width: 100%;">
                                            <button class="layui-btn" id="submit"
                                                style="display:inline-block">确定</button>
                                            <button class="layui-btn layui-btn-primary"
                                                style="display:inline-block;margin:0 20px;" id="clears">取消</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="peyTypeTem" style="display:none;">
            <div id="pay-header">
                <div class="item active" data-type="1">
                    <img src="/Public/images/wx.png">
                </div>
                <div class="item" data-type="2">
                    <img src="/Public/images/zfb.png">
                </div>
                <div class="item" data-type="3">现金支付</div>
            </div>
            <div id="pay-body">
                <div class="layui-form-item">
                    <label for="L_username" class="layui-form-label" style="width: auto;padding: 9px 0;">支付条码：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="code-num" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn" id="clearCode">清除</button>
                </div>
            </div>
            <div id="pay-footer" style="padding:20px;text-align: right;">
                <span class="total-num">总金额：<span class="e-money">0.00</span> 元</span>
                <button class="layui-btn" id="pay-btn">确定</button>
            </div>
        </div>
</body>
<script>
    layui.use(['form'], function() {
        form = layui.form;
        form.on('radio',function(data){
            console.log(data.elem)
            $('#eatType input').removeAttr('checked');
            $(data.elem).prop('checked','checked');
        })
    });
    // 默认label
    var typeArr = [
    ]
    var selectFood = [];
    var foodArr = []
    $.post("/Admin/FoodProduct/getProductCate", {}, function (msg) {
        $.each(msg.data, function (i, e) {
            var html = '<div class="typeLabel" data-id="' + e.id + '">' + e.value + '</div>'
            $('#type-panel').append(html)
        })
    })
    $.post('/Admin/FoodProduct/getCateProduct', { id: 'a' }, function (msg) {
        foodArr = msg.data;
        rendFoodlist(foodArr)
    })


    $(document).on('click', '.typeLabel', function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        var id = $(this).attr('data-id');
        $.post('/Admin/FoodProduct/getCateProduct', { id: id }, function (msg) {
            foodArr = msg.data;
            rendFoodlist(foodArr)
        })
    })
    $(document).on('click', '#clearCode', function () {
        $('#code-num').val('');
        $('#code-num').focus()
    })
    $(document).on('click', '.block-food .foodCrad', function () {
        var index = $(this).attr('data-index')
        var id = $(this).attr('data-id')
        $(this).siblings().removeClass('active');
        $(this).addClass('active')
        foodArr[index].count = 1;
        var flag = false;
        if (selectFood.length) {
            $('.selectFoodCrad').each(function (i, e) {
                console.log($(e).attr('data-id') == id)
                if ($(e).attr('data-id') == id) {
                    flag = true;
                    selectFood[i].count = parseInt($(e).find('.num').html()) + 1;
                }
            })

            if (!flag) {
                selectFood.unshift(foodArr[index])
            }
            rendSelectFoodDom(selectFood)
        } else {
            selectFood.unshift(foodArr[index])
            rendSelectFoodDom(selectFood)
        }
    })



    $(document).on('click', '.reduce', function () {
        if (parseInt($(this).siblings('.num').html()) == 1) {
            $(this).parents('.selectFoodCrad').remove()
        }
        $(this).siblings('.num').html(parseInt($(this).siblings('.num').html() - 1))
        selectFood = []
        $('.selectFoodCrad').each(function (i, e) {
            selectFood.push({
                id: $(e).attr('data-id'),
                price: $(e).attr('data-price'),
                name: $(e).find('.foodname').html(),
                count: $(e).find('.num').html()
            })
        })
        rendSelectFoodDom(selectFood)
    })
    $(document).on('click', '.plus', function () {
        $(this).siblings('.num').html((parseInt($(this).siblings('.num').html()) + 1))
        selectFood = []
        $('.selectFoodCrad').each(function (i, e) {
            selectFood.push({
                id: $(e).attr('data-id'),
                price: $(e).attr('data-price'),
                name: $(e).find('.foodname').html(),
                count: $(e).find('.num').html()
            })
        })
        rendSelectFoodDom(selectFood)
    })



    $(document).on('click', '#pay-panel .item', function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        $('#code-num').focus()
    })

    var timeA = null;
    $('#submit').click(function () {
        $('#peyTypeTem .item').removeClass('active');
        $('#peyTypeTem .item').eq(0).addClass('active');
        var eatType = $(':radio[name="eat"]:checked').val();
        $.post("/Admin/Orders/artificialOrder", { food: selectFood,memo:eatType }, function (msg) {
            if (msg.code == 10000) {
                $('#pay-btn').attr('data-order', msg.data.order_no)
                data = {};
                data.order_no = msg.data.order_no;
                var total = $('.money-num').text().trim();
                $('.e-money').html(total);
                layer.open({
                    type: 1,
                    area: ['640px', 'auto'],
                    title: '选择支付方式',
                    id: 'pay-panel',
                    content: $('#peyTypeTem'),
                    success: function (layero, index) {
                        $('#code-num').focus()
                        $('#code-num').val('')
                        $('#code-num').bind('input propertychange', postCode)
                    },
                    end: function(){
                        $('#code-num').unbind('input propertychange');
                    }
                });



            } else {
                layer.alert(msg.msg, { title: '下单提示' })
            }
        })
        console.log(selectFood)
    })

    $(document).on('click', '#pay-btn', function () {
        var type = $('#pay-panel .active').attr('data-type');
        var orderNo = $('#pay-btn').attr('data-order');
        $.post("/Admin/Orders/barCodePay", { order_no: orderNo, pay_type: type }, function (msg) {
            console.log(msg);
            if (msg.code == 10000) {
                layer.alert('支付成功', {
                    title: '支付提示',
                    closeBtn: 0
                }, function () {
                    layer.closeAll()
                    $('#code-num').unbind('input propertychange');
                });
                selectFood = [];
                $('.selectfoodBody').html('')
                $('.food-num').html(0)
                $('.money-num').html(0)
                $('.foodCrad').removeClass('active');

            }

        })
    })

    function postCode() {
        var type = $('#pay-panel .active').attr('data-type');
        var length = 0;
        var flag = false;
        if (type == 1) {
            length = 18;
            flag = true;
        }
        if (type == 2) {
            length = 16;
            flag = true;
        }
        if (flag && $(this).val().length >= length) {
            data.pay_type = type;
            var that = $(this);
            $('#code-num').unbind('input propertychange');

            setTimeout(function () {
                var bar_code = that.val();
                $.post("/Admin/Orders/barCodePay", { order_no: data.order_no, pay_type: type, bar_code: bar_code }, function (msg) {
                    if (msg.code == 10000) {
                        layer.alert('支付成功', {
                            title: '支付提示',
                            closeBtn: 0
                        }, function () {
                            layer.closeAll()
                            $('#code-num').unbind('input propertychange');
                        });
                        selectFood = [];
                        $('.selectfoodBody').html('')
                        $('.food-num').html(0)
                        $('.foodCrad').removeClass('active');
                        $('.money-num').html(0)
                    } else {
                        layer.load(2, {
                            shade: [0.9, 'gray'],
                            id: 'pay-status',
                            content: '<img src="/Public/lib/layui/css/modules/layer/default/loading-2.gif" style="margin-bottom:10px;"><br>' + msg.msg + '<br> <button class="layui-btn closebtnt closeLoading"> ( <span class="c-num">30</span> ) 后可关闭 </button>',
                            success: function (layero, index) {
                                layero.find('.layui-layer-content').css({
                                    'text-align': 'center',
                                });
                                $('.closeLoading').on('click', function () {
                                    layer.close(index);
                                    $('#code-num').val('')
                                    $('#code-num').focus()
                                    window.clearInterval(btntimer);
                                    window.clearInterval(timeA);
                                    $('#code-num').bind('input propertychange', postCode)
                                })
                            }
                        });
                        var i = 30;
                        btntimer = setInterval(function () {
                            $('.c-num').html(i)
                            if (i <= 0) {
                                window.clearInterval(btntimer)
                                $('.closebtnt').html('关闭')
                            }
                            i--;
                        }, 1000)
                        timeA = setInterval(function () {
                            $.post("/Admin/Orders/searchOrderPay", data, function (msg) {
                                if (msg.code == 10000) {
                                    layer.alert('支付成功', {
                                        title: '支付提示',
                                        closeBtn: 0
                                    }, function () {
                                        layer.closeAll()
                                        $('#code-num').unbind('input propertychange');
                                    });
                                    selectFood = [];
                                    $('.selectfoodBody').html('')
                                    $('.food-num').html(0)
                                    $('.money-num').html(0)
                                    $('.foodCrad').removeClass('active');
                                    window.clearInterval(timeA)
                                }
                            })
                        }, 1000)
                    }
                })
            }, 2000)


        }
    }
    //        $('#submit').click(function() {
    //            $.post("/Admin/Orders/artificialOrder", {food: selectFood}, function(msg) {
    //                if (msg.code == 10000) {
    //                    layer.alert("完成", {title: "提示"})
    //                    selectFood = [];
    //                    $('.selectfoodBody').html('')
    //                    $('.food-num').html(0)
    //                    $('.money-num').html(0)
    //                } else {
    //                    layer.alert(msg.msg, {title: "提示"})
    //                }
    //            })
    //        })
    $('#clears').click(function () {
        selectFood = [];
        $('.selectfoodBody').html('')
        $('.food-num').html(0)
        $('.money-num').html(0)
        $('.foodCrad').removeClass('active');
        console.log(selectFood)
    })

    function rendSelectFoodDom(obj) {
        $('.selectfoodBody').html('')
        var foodNum = 0;
        var total = 0
        $.each(obj, function (i, e) {
            var html = '<div class="selectFoodCrad" data-index="' + i + '" data-id="' + e.id + '" data-price="' + e.price + '"><div class="foodname">' + e.name + '</div><div class="operation"><div class="reduce btn">-</div><div class="num">' + e.count + '</div> <div class="plus btn">+</div></div></div>'
            $('.selectfoodBody').append(html)
            foodNum += 1;
            total += e.price * e.count
        })
        $('.food-num').html(foodNum)
        $('.money-num').html(total / 100)
    }
    // 渲染菜品列表
    function rendFoodlist(obj) {
        $('#foodlist').html('');
        $.each(obj, function (i, e) {
            var html = '<div class="foodCrad" data-index="' + i + '" data-id="' + e.id + '"><span>' + e.name + '</span><div class="money">' + e.price / 100 + '元</div></div>'
            $('#foodlist').append(html)
        })
    }
</script>

</html>